<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
  >
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <script>
    // 假设后端返回的数据为data，每页显示的数据条数为size
    var data = []; // 从后端获取的数据
    var size = 10;
    var currentPage = 1;

    // 初始化表格
    function initTable() {
      var tableBody = $('#data-table tbody');
      tableBody.empty();

      for (var i = (currentPage - 1) * size; i < currentPage * size && i < data.length; i++) {
        tableBody.append('<tr><td>' + data[i].id + '</td><td>' + data[i].name + '</td><td>' + data[i].age + '</td></tr>');
      }
    }

    // 更新分页信息
    function updatePagination() {
      $('.current').text(currentPage);
      $('.total').text(Math.ceil(data.length / size));
    }

    // 点击分页控件时触发
    $('#pagination a').click(function() {
      var page = $(this).data('page');
      currentPage = page;
      initTable();
      updatePagination();
    });

    // 初始化分页
    initTable();
    updatePagination();
  </script>
</head>
<body>
  <table id="data-table">
    <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
    </thead>
    <tbody></tbody>
  </table>

  <div id="pagination">
    <span class="current">1</span>/<span class="total">10</span>
    <a href="#" data-page="2">2</a>
    <a href="#" data-page="3">3</a>
    <a href="#" data-page="4">4</a>
    <a href="#" data-page="5">5</a>
  </div>
</body>
</html>
